<template>
	<view>
		<view class="top">
			<view class="pic">
				<image class="bg"
					src="https://cdn3.axureshop.com/demo/2116044/images/%E6%88%91%E7%9A%84%EF%BC%88%E5%B7%B2%E7%99%BB%E5%BD%95%EF%BC%89/u3877.png">
				</image>
				<!-- 登录状态下首页 -->
				<view class="my" v-if="status==1">
					<view>
						<image class="tx" :src="headPicture"></image>
					</view>
					<view class="mymsg">
						<view>
							<text>{{nickName}}</text>
							<text>普通会员</text>
						</view>
						<view>
							<text>{{changeph}}</text>
						</view>
					</view>
					<view class="fewm">
						<image @click="menber_code" class="ewm"
							src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u610.png">
						</image>
					</view>
				</view>
				<!-- 未登录状态下首页 -->
				<view class="my" v-if="status==0">
					<view class="nomytx">
						<image class="notx"
							src="https://cdn3.axureshop.com/demo/2116044/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E6%9C%AA%E7%99%BB%E5%BD%95%EF%BC%89/u1505.png">
						</image>
					</view>
					<view @click="nologin_menber" class="mymsg">
						登录
					</view>
					<view class="no">
						<image class="go"
							src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="cen" v-if="status==1">
			<view @click="getbalance">
				<view>
					<text>￥</text>
					<text class="num">{{balance}}</text>
				</view>
				<text class="word">余额</text>
			</view>
			<view @click="get_takeawayCoupon">
				<text class="num">{{takeawayCoupon}}</text>
				<text class="word">优惠券</text>
			</view>
			<view @click="getscore">
				<text class="num">{{score}}</text>
				<text class="word">积分</text>
			</view>
		</view>
		<view class="bot">
			<view @click="infor">
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u900.png">
				</image>
				<text>消息</text>
				<view class="msgsum" v-if="status==1">
					<text style="color: white;">3</text>
				</view>
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
				</image>
			</view>
			<view @click="address">
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u904.png">
				</image>
				<text>地址管理</text>
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
				</image>
			</view>
			<view @click="contact">
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u908.png">
				</image>
				<text>联系客服</text>
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
				</image>
			</view>
			<view @click="mymsg" v-if="status==1">
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u912.png">
				</image>
				<text>个人信息</text>
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
				</image>
			</view>
			<view @click="nologin_menber" v-if="status==0">
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u912.png">
				</image>
				<text>个人信息</text>
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		onShow() {
			this.phone = uni.getStorageSync("phone");
			this.status = uni.getStorageSync("status");
			console.log(this.phone);
			if (this.status == 1) {
				this.get();
			}
			this.changephone()
		},
		data() {
			return {
				status: '0',
				id: '',
				nickName: '',
				headPicture: '',
				balance: '',
				score: '',
				phone: '',
				takeawayCoupon: '',
				changeph: ''
			}
		},
		methods: {
			getbalance() {
				console.log(this.balance)
				uni.navigateTo({
					url: `/pages/balance/balance?balance=${this.balance}`
				})
			},
			get_takeawayCoupon() {
				console.log(this.takeawayCoupon)
				uni.navigateTo({
					url: `/pages/coupon/coupon?takeawayCoupon=${this.takeawayCoupon}`
				})
			},
			getscore() {
				console.log(this.score)
				uni.navigateTo({
					url: `/pages/score/score?score=${this.score}`
				})
			},
			changephone() {
				let _phone1 = this.phone;
				let _phone2 = this.phone;
				_phone1 = _phone1.slice(0, 3);
				_phone2 = _phone2.slice(7);
				let cen = '****';
				_phone1 = _phone1.concat(cen);
				this.changeph = _phone1.concat(_phone2)
			},
			mymsg() {
				uni.navigateTo({
					url: '/pages/mymsg/mymsg'
				})
			},
			get() {
				http({
					url: '/get',
					params: {
						phone: this.phone
					},
					success: (res) => {
						console.log(res)
						if (res.data) {
							this.id = res.data.id;
							this.nickName = res.data.data[0].nickName;
							this.headPicture = res.data.data[0].headPicture;
							this.balance = res.data.data[0].balance;
							this.score = res.data.data[0].score;
							this.takeawayCoupon = res.data.data[0].score;
						}
					}
				})
			},
			menber_code() {
				uni.navigateTo({
					url: `/pages/menbercode/menbercode?balance='${this.balance}'`
				})
			},
			nologin_menber() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			infor() {
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
			address() {
				uni.navigateTo({
					url: '/pages/adminaddress/adminaddress'
				})
			},
			contact() {
				uni.navigateTo({
					url: '/pages/contact/contact'
				})
			}
		}
	}
</script>

<style>
	.pic {
		position: relative;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 300rpx;
		background-color: rgba(246, 234, 227, 1);

	}

	.my {
		position: absolute;
		width: 690rpx;
		height: 120rpx;
		top: 250rpx;
		background-color: #ffffff;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.tx {

		width: 120rpx;
		height: 120rpx;
		text-align: center;
	}

	.ewm {
		width: 40rpx;
		height: 40rpx;
	}

	.nomytx {
		margin-top: 8rpx;
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #f8f8f8;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.notx {
		width: 50rpx;
		height: 65rpx;
	}

	.go {
		width: 15rpx;
		height: 30rpx;
	}

	.mymsg {
		display: flex;
		flex-direction: column;
		color: #333333;
		font-size: 34rpx;
	}

	.nomytx .mymsg {
		width: 80rpx;
		flex: auto;
	}

	.my>view:nth-child(1) {
		margin-left: 30rpx;
		width: 120rpx;
	}

	.my>view:nth-child(2) {
		flex: 1;
		margin-left: 15rpx;
	}

	.my>view:nth-child(3) {
		width: 40rpx;
		margin-right: 30rpx;
	}

	.mymsg view:first-child text:first-child {
		font-size: 46rpx;
		font-weight: 650;
		margin: 0 20rpx 20rpx 0;
	}

	.mymsg view:first-child text:last-child {
		font-size: 26rpx;
		background-color: rgba(247, 114, 20, 1);
		border-radius: 10rpx;
		padding: 3rpx 8rpx;
		color: #ffffff;
		margin: 10rpx 20rpx 20rpx 0;
	}

	.mymsg view:last-child text {
		font-size: 22rpx;
		color: #999999;
		margin-right: 25rpx;

	}

	.cen {
		position: absolute;
		width: 650rpx;
		margin-top: 400rpx;
		height: 150rpx;
		margin-left: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cen>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.cen view view {
		padding-bottom: 20rpx;
	}

	.num {
		font-size: 48rpx;
		font-weight: 650;
		padding-bottom: 20rpx;
	}

	.word {
		font-size: 22rpx;
		color: #999999;
	}

	.bot {
		position: absolute;
		width: 690rpx;
		margin-top: 550rpx;
		margin-left: 30rpx;
	}

	.bot>view {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}

	.bot view image:first-child {
		width: 35rpx;
		height: 35rpx;
		margin-left: 20rpx;
		margin-right: 15rpx;
	}

	.bot view image:last-child {
		width: 15rpx;
		height: 30rpx;
		margin-right: 40rpx;
		margin-left: 30rpx;
	}

	.bot>view text {
		flex: 1;
		color: #333333;
		font-size: 28rpx;
	}

	.msgsum {
		width: 30rpx;
		text-align: center;
		background-color: rgba(247, 114, 20, 1);
		font-weight: 600;
		border-radius: 50%;
	}
</style>
